import 'package:flutter/material.dart';
import '../../utils/G.dart';

class Coupon extends StatefulWidget {
  const Coupon({Key? key}) : super(key: key);

  @override
  _CouponState createState() => _CouponState();
}

class _CouponState extends State<Coupon> {
  List list = [];
  final List listTypes = [
    {"type": 1, "title": "未使用"},
    {"type": 2, "title": "已使用"}
  ];
  int _currentIndex = 0;
  int _type = 1;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _initData();
    Future.delayed(const Duration(milliseconds: 500), () {
      if (mounted) {
        setState(() {});
      }
    });
  }

  void _initData() async {
    var res = await G.api.coupon.list(type: _type);
    if (res['status'] == 200) {
      list = res['data'];
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的优惠券'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // 顶部分类导航
          Container(
            height: 50,
            color: Colors.grey.shade100,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: listTypes.length,
                itemBuilder: (BuildContext context, int index) {
                  // return Text(index.toString());
                  return _renderType(index);
                }),
          ),

          // 优惠券列表
          _renderList()
        ],
      ),
    );
  }

  Widget _renderType(int i) {
    return GestureDetector(
        child: Container(
          width: G.width / listTypes.length,
          alignment: Alignment.center,
          padding: const EdgeInsets.symmetric(vertical: 2, horizontal: 1),
          decoration: BoxDecoration(
              color: _currentIndex == i
                  ? Colors.blue.shade100
                  : Colors.grey.shade100,
              border: Border(
                  bottom: BorderSide(
                width: 3,
                color: _currentIndex == i
                    ? Colors.blue.shade200
                    : Colors.grey.shade100,
              ))),
          child: Text(listTypes[i]['title'],
              style: TextStyle(
                  color: _currentIndex == i
                      ? Theme.of(context).primaryColor
                      : Colors.black45,
                  fontWeight:
                      _currentIndex == i ? FontWeight.w600 : FontWeight.w400,
                  fontSize: 16)),
        ),
        onTap: () {
          _currentIndex = i;
          _type = listTypes[i]['type'];

          _initData();
          Future.delayed(const Duration(milliseconds: 400), () {
            setState(() {});
          });
        });
  }

  Widget _renderList() {
    return Wrap(
      spacing: 10.0,
      direction: Axis.horizontal,
      alignment: WrapAlignment.start,
      children: List<Widget>.generate(list.length, (int index) {
        return Container(
          margin: const EdgeInsets.fromLTRB(10, 10, 10, 0),
          color: Colors.white,
          child: ListTile(
            leading: Icon(Icons.mail_outline,
                size: 40, color: _type == 1 ? Colors.green : Colors.grey),
            title: Text(list[index]['coupon_title'].toString(),
                style:
                    const TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
            subtitle: RichText(
                text: TextSpan(
                    text: list[index]['add_time'].toString(),
                    style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: Colors.grey),
                    children: [
                  TextSpan(
                    text: ' - ' + list[index]['end_time'].toString(),
                    style: const TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: Colors.grey),
                  )
                ])),
            trailing: Text("￥ " + list[index]['coupon_price'].toString(),
                style: TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.w500,
                    color: _type == 1
                        ? Theme.of(context).primaryColor
                        : Colors.grey)),
          ),
        );
      }).toList(),
    );
  }
}
